<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>[|.pageTitle|]</title>
    [|if .zTree|]
    <link rel="stylesheet" href="/static/zTree3/css/demo.css?t=5" type="text/css">
    <link rel="stylesheet" href="/static/zTree3/css/zTreeStyle/zTreeStyle.css" type="text/css">
    [|end|]
    <meta charset="utf-8">
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/css/main.css">
      <link rel="stylesheet" href="/static/layui/dist/css/layui.css"  media="all">
    <script src="/static/layui/layui.js?s=36"></script>
    <script src="/static/js/main.js?s=2124"></script>
</head>
<div class="layui-layout layui-layout-admin" style="padding-left: 30px;">
   
    <div class="layui-form-item">
        <div class="layui-inline">
             <label class="layui-form-label">房间信息：</label>
            <div class="layui-input-inline">
                <input type="text" name="sys_room_info" id="sys_room_info" lay-verify="text" autocomplete="off"  class="layui-input" value="[|.RoomInFoName|]([|.RoomInFoServerID|])" disabled>
            </div>
            <label class="layui-form-label">时间：</label>
            <div class="layui-input-inline">
                <input type="text" name="befordate" id="befordate" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" value="" readonly>
            </div>
             <div class="layui-form-mid layui-word-aux">-</div>
            <div class="layui-input-inline">
                <input type="text" name="afterdate" id="afterdate" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" value="" readonly>
            </div>
            <div class="layui-btn-group" >
                <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="queryBtn">开始查询</button>
            </div>
              
        </div> 
    </div> 

    <table  class="layui-table" id = 'RoomEatPikTable' lay-size="sm" lay-filter="layfilterRoomInfo"> </table>

</div>

<script>
    var $;

    layui.config({
            base : "js/"
    }).use(['table','form','element','layer','jquery','laydate'], function(){
        var table = layui.table;
        var element = layui.element;
        var form = layui.form;
        var laydate = layui.laydate;
        $ = layui.jquery;
    //监听表格复选框选择
   // table.on('checkbox(demo)', function(obj){
    //   console.log(obj);
   // });

    //方法级渲染
    

    GetMyTables(table)
    //监听工具条
     laydate.render({
            elem: '#befordate'
        });
    laydate.render({
            elem: '#afterdate'
    });

    form.on('submit(queryBtn)', function(data) {
        GetMyTables(table);
        return false;
    });
});
function GetMyTables(thisTabble){
 
    var tmpbefor_date =  document.getElementById("befordate");
    var tmpafter_date = document.getElementById("afterdate");
    thisTabble.render({
        elem: '#RoomEatPikTable'
         ,url:'/sysroomconf/hisetaputtable'
        ,where: {
            RoomInFo_Name:[|.RoomInFoName|]
            ,RoomInFo_ServerID:[|.RoomInFoServerID|]
            ,befor_date:tmpbefor_date.value
            ,after_date:tmpafter_date.value
        }
        ,cols: [[ //标题栏
            {field:'UpDataTime',  title:'时间',sort:true,height:300,width:150,fixed:true}
            ,{field:'SerVerID',title:'SerVerID',height:300,width:150}
            ,{field:'RoomName', title:'房间',height:300,width:200}
            ,{field:'TodayWin', title:'当日输赢', height:300,width:200} 
            ,{field:'PukeSocretotal',title:'吐分总量',height:300,width:200}
            ,{field:'PukeTimes',title:'吐分次数', height:300,width:200}
            ,{field:'EateScoreTotal',title:'吃分总量',height:300,width:200}
            ,{field:'EatTimes',title:'吃分次数',height:300,width:200}
            ,{field:'EatTimePuke', title:'吞吐率',height:300,width:200}
           
                ]] 
        ,skin: 'row' //表格风格
        ,even: true
        ,page: true //是否显示分页
        ,limits: [30,50,100]
        ,limit: 30 //每页默认显示的数量
        ,width: 'full-10'
        ,rules: 'all'
        ,height: 'full-135'
    });
}

</script>
</body>
</html>